<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Leftlet的Geojson测试</title>
    <link rel="stylesheet" href="./css/leaflet.css">
    <style type="text/css">
      *{
          margin: 0;
          padding: 0;
          border: 0;
      }
      #map {
          position: absolute;
          height: 100%;
          width: 100%;
      }
    </style>
    <script type="text/javascript" src="./lib/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/leaflet/leaflet.js"></script>
</head>
<body>
<div id="map"></div>


<script type="text/javascript">
  var geojson;
  $.ajax({
    url:"./geojson/china.json",
    type:"get",
    data:{},
    async:false,
    dataType:"json",
    success:function(res){
      geojson = res;
    },
    err:function(err){
      console.log('err = ' + err);
    }
  });

  var map = L.map('map').setView([39.92, 116.46], 5);
//map.createPane('labels');
//map.getPane('labels').style.zIndex = 650;
//map.getPane('labels').style.pointerEvents = 'none';
  L.tileLayer('https://tiles.windy.com/tiles/v8.1/darkmap/{z}/{x}/{y}.png',{
//  pane:'labels'
  }).addTo(map);

  var provinceGeo = L.geoJSON(geojson,{
      style: function (feature) {
        return {color:'#ffffff'};
      }
  }).addTo(map);

  provinceGeo.eachLayer(function(layer){
    layer.bindPopup(layer.feature.properties.name);
  });
</script>
</body>
</html>